<script setup>
import {reactive} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const storeGroup = reactive({
  store:useStore()
})

const routerGroup = reactive({
  router:useRouter(),
  route:useRoute(),
  linkLogin(){
    this.router.push({name:"login"});
  }
})

const dialogGroup = reactive({
  dialogVisible:false,
  dialogMessage:"",
})

const registerGroup = reactive({
  username:"",
  account:"",
  password:"",
  async register(){
    await storeGroup.store.dispatch("userRegister",{username:this.username,account:this.account,password:this.password});
    if (storeGroup.store.state.user.userState.loginState){
      await routerGroup.router.push({name: "user"});
      routerGroup.router.go(0);
    }else{
      dialogGroup.dialogMessage = storeGroup.store.state.user.failCode;
      dialogGroup.dialogVisible = true;
    }
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogGroup.dialogVisible"
      title="Tips"
      width="30%"
  >
    <span>{{ dialogGroup.dialogMessage }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogGroup.dialogVisible = false">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <div class="register">
    <div class="container">
      <el-row>
        <el-col :span="6" :offset="4">

        </el-col>
        <el-col :span="6" :offset="3">
          <form onsubmit="return false" class="register-form">
            <div class="title">
              <p>注册</p>
            </div>
            <div class="head">
              <p>欢迎来到车之家</p>
              <span>已有账号？</span>
              <a class="login" @click="routerGroup.linkLogin()">立刻登录</a>
            </div>
            <div class="actual-from">
              <div class="input-wrap">
                <input id="register_username" v-model.lazy="registerGroup.username" class="input-field" placeholder="请输入您的昵称" type="text">
                <label for="register_username"></label>
              </div>
              <div class="input-wrap">
                <input id="register_account" v-model.lazy="registerGroup.account" class="input-field" placeholder="请输入您的账户名" type="text">
                <label for="register_account"></label>
              </div>
              <div class="input-wrap">
                <input id="register_password" v-model.lazy="registerGroup.password" class="input-field" placeholder="请输入您的密码" type="password">
                <label for="register_password"></label>
              </div>
              <button class="login-btn" @click="registerGroup.register()">注册</button>
            </div>
          </form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped src="../css/account.css">
</style>
